<template>
  <div class="page luckdraw-index">
    <div class="luckdraw-index-container">
      <div class="top-container">
        <div class="notice">
          <notice-list :listData="noticeList"></notice-list>
        </div>
        <button open-type="share"><span>分享给朋友</span><i></i></button>
      </div>
      <div class="list-container">
        <list-item v-for="(item, i) in activityList" :key="i"
          v-if="item.activity_id" :listData="item" :listInData="listInData" :checkJoin="true"></list-item>
      </div>
      <div class="link-container">
        <a @click="onToSponsorClick">成为赞助商</a>
        <span>|</span>
        <a @click="onToRecordAllClick">查看我的抽奖</a>
      </div>
      <m-tabbar current="0"></m-tabbar>
    </div>
  </div>
</template>

<script>
import ListItem from 'comp/list-item'
import MTabbar from 'comp/m-tabbar'
import NoticeList from 'comp/notice-list'
import mixins from 'comp/mixins'
import { setStorage } from '@/utils/wx'

export default {
  mixins: [mixins],
  components: {
    ListItem,
    MTabbar,
    NoticeList
  },
  data () {
    return {
      activityList: [],
      listInData: [],
      icons: {
        info: `${require('static/images/info.png')}`
      },
      noticeList: []
    }
  },
  async onShow () {
    // 检查用户授权
    const authResult = await this.checkAuth()
    if (authResult) {
      // 保存我的上级
      const query = this.$root.$mp.query
      const parentId = query.parentId || query.scene
      await setStorage('parentId', parentId)

      this.getActivityList()
      this.getNoticeList()
    }
    // 检查小程序更新
    this.checkUpdate()
  },
  onShareAppMessage () {
    return {
      title: '推荐天天派奖给你，来试试',
      path: '/pages/index/main'
    }
  },
  methods: {
    /**
     * 获取公共抽奖列表
     */
    async getActivityList () {
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('getActivityList', {
        page: 1,
        rows: 20,
        isPublic: true,
        createrId: '',
        status: 1,
        playerid: openId
      })
      this.activityList = ret.list
      this.listInData = ret.in
    },
    /**
     * 获取消息列表
     */
    async getNoticeList () {
      const ret = await this.$store.dispatch('getNewsList', {
        page: 1,
        rows: 30
      })
      this.noticeList = ret
    },
    /**
     * 查看我的抽奖
     */
    onToRecordAllClick () {
      wx.navigateTo({
        url: '/pages/record/main?type=all',
      })
    },
    /**
     * 成为赞助商
     */
    onToSponsorClick () {
      wx.navigateTo({
        url: '/pages/sponsor/main',
      })
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-index {
  &-container {
    padding-bottom: 114rpx;
  }
  .top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 24rpx;
    .notice {
      flex: 1;
      padding-right: 50rpx;
    }
    button {
      display: flex;
      align-items: center;
      color: #488ff0;
      font-size: 28rpx;
      background-color: transparent;
      margin: 0;
      padding: 0;
      line-height: 40rpx;
      &::after {
        display: none;
      }
      i {
        display: block;
        width: 28rpx;
        height: 28rpx;
        background: url("../../../static/images/share.png") no-repeat center center;
        background-size: contain;
        margin-left: 14rpx;
      }
    }
  }
  .link-container {
    display: flex;
    justify-content: center;
    color: #222;
    font-size: 28rpx;
    padding: 20rpx 0 40rpx;
    span {
      padding: 0 24rpx;
      color: #ccc;
    }
  }
}
</style>
